<template>
  <div class="row" id="moreTuijian">
    <div class="col">
      <div class="row mga">
        <div class="colyu">
          <h4 class="referre">更多相关课程</h4>
        </div>
      </div>
      <div class="row more">
        <div class="col-sm-1">
          <i class="el-icon-arrow-left d-font" @click="moreTuijian(1)"></i>
        </div>
        <div class="col m-center">
          <transition name="el-fade-in">
            <div class="rowi" v-show="show">
              <div class="colkk">
                <router-link
                  v-if="ktTuijianShow(inde[0])"
                  :to="{ name: 'course', params: { ktId:ktIds(inde[0])}}"
                >
                  <img
                    :src="ktTuijian[inde[0]].banner + '?x-oss-process=style/style-400'"
                    class="img-fluid rounded imgshadow"
                    alt
                  >
                  <p class="herd">{{ktTuijian[inde[0]].name}}</p>
                </router-link>
              </div>
              <div class="colkk">
                <router-link
                  v-if="ktTuijian[inde[1]]"
                  :to="{ name: 'course', params: { ktId: ktTuijian[inde[1]].ID }}"
                >
                  <img
                    :src="ktTuijian[inde[1]].banner+ '?x-oss-process=style/style-400'"
                    class="img-fluid rounded imgshadow"
                    alt
                  >
                  <p class="herd">{{ktTuijian[inde[1]].name}}</p>
                </router-link>
              </div>
              <div class="colkk">
                <router-link
                  v-if="ktTuijian[inde[2]]"
                  :to="{ name: 'course', params: { ktId: ktTuijian[inde[2]].ID }}"
                >
                  <img
                    :src="ktTuijian[inde[2]].banner+ '?x-oss-process=style/style-400'"
                    class="img-fluid rounded imgshadow"
                    alt
                  >
                  <p class="herd">{{ktTuijian[inde[2]].name}}</p>
                </router-link>
              </div>
              <div class="colkk">
                <router-link
                  v-if="ktTuijian[inde[3]]"
                  :to="{ name: 'course', params: { ktId: ktIds(inde[3]) }}"
                >
                  <img
                    :src="ktTuijian[inde[3]].banner+ '?x-oss-process=style/style-400'"
                    class="img-fluid rounded imgshadow"
                    alt
                  >
                  <p class="herd">{{ktTuijian[inde[3]].name}}</p>
                </router-link>
              </div>
            </div>
          </transition>
        </div>
        <div class="col-sm-1">
          <i class="el-icon-arrow-right d-font" @click="moreTuijian(-1)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { delayed } from "../plugins/utils.js";
export default {
  data() {
    return {
      inde: [0, 1, 2, 3],
      show: true
    };
  },
  props: ["ktTuijian"],
  methods: {
    ktTuijianShow(i) {
      return this.ktTuijian[i];
    },
    ktIds(i) {
      return this.ktTuijian[i].ID;
    },
    img(i) {
      return this.ktTuijian[i].banner;
    },
    async moreTuijian(i) {
      let n = this.ktTuijian.length;
      if (i == 1) {
        for (let v in this.inde) {
          if (this.inde[v] == 0) {
            break;
          }
          this.inde[v] = this.inde[v] - 4;
        }
        this.show = false;
        await delayed(200);
        this.show = true;
      } else {
        if (this.inde[3] != false && this.inde[3] + 1 < n) {
          this.show = false;
          for (let v in this.inde) {
            this.inde[v] = this.inde[v] + 4;
          }
          await delayed(200);
          this.show = true;
        }
      }
    }
  }
};
</script>


<style scoped>
#moreTuijian {
  margin-top: 15px;
  margin-bottom: 45px;
}
.d-font {
  font-size: 48px;
  color: #dfdfdf;
  cursor: pointer;
  line-height: initial;
}

.d-font:hover {
  color: black;
}

.col-sm-1 {
  display: flex;
  justify-content: center;
  align-items: Center;
  margin-left: -19px;
}
.more {
  width: 100%;
  margin: auto;
  min-height: 150px;
}
.m-center {
  margin: auto;
}
.referre {
  margin-left: 30px;
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #555555;
}
.col {
  width: 243px;
  height: 130px;
}
.colyu {
  width: 200px;
  height: 20px;
}
.colkk {
  width: 223px;
  height: 159px;
  margin-right: 26px;
  border-radius:10px;
  box-shadow: 4px 2px 5px #f5f7fa;
}
.rowi {
  width: 983px;
  display: -webkit-box;
  display: flex;
}
.herd {
  width: 215px;
  height: 14px;
  font-family: "微软雅黑";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #3c3c3c;
  margin-top: 10px;
  margin-left: 12px;
  margin-bottom: 14px;
}
.rounded{
  border-radius:10px 10px 0 0px !important;
}
</style>